let arr = [
  {
    id: 1,
    src: './img/img1.jpg',
    href: 'http://pic.people.com.cn/n1/2022/1013/c1016-32544456-3.html',
    title: '三峡库岸生态美',
  },
  {
    id: 2,
    src: './img/img2.png',
    href: 'http://www.news.cn/photo/2022-10/14/c_1129063669.htm',
    title: '美国9月CPI环比涨幅超预期',
  },
  {
    id: 3,
    src: './img/img3.png',
    href: 'http://pic.people.com.cn/n1/2022/1013/c1016-32544481-2.html',
    title: '晨景如画',
  },
  {
    id: 4,
    src: './img/img4.png',
    href: 'https://photo.cctv.com/2022/10/14/PHOApew3m7GPlH9I3IT0Tmim221014.shtml?spm=C35449.P80754075394.S41437.39#TG75JBiWafUf221014_1',
    title: '昆明迎来观鸥季',
  },
  {
    id: 5,
    src: './img/img5.png',
    href: 'http://www.news.cn/photo/2022-10/14/c_1129063816.htm',
    title: '“梵高,库勒慕勒美术馆的杰作”展览在罗马举行',
  },
  {
    id: 6,
    src: './img/img6.png',
    href: 'https://photo.cctv.com/2022/10/14/PHOA1oeI9irKsQdeyBx4KjJh221014.shtml?spm=C35449.P80754075394.S41437.17#naUkePhBqRO8221014_1',
    title: '安徽黄山：千年迎客松迎来全面体检',
  },
  {
    id: 7,
    src: './img/img7.png',
    href: 'http://pic.people.com.cn/n1/2022/1013/c1016-32544487.html',
    title: '北京：国道109新线高速公路建设正酣',
  },
  {
    id: 8,
    src: './img/img8.jpeg',
    href: 'http://www.news.cn/photo/2022-10/13/c_1129062858.htm',
    title: '吉林西部：昔日盐碱地 今朝丰收田',
  },
]

// 数组元素的下标
let index = 0
// 定时器的编号
let timer = 0
// 轮播切换的时间间隔
let duration = 2000
const a = document.querySelector('.loop>.img-box>a')
const img = document.querySelector('.loop>.img-box>a>.img')
const title = document.querySelector('.loop>.title')
const loop = document.querySelector('.loop')
const list = document.querySelectorAll('.loop>ul>li')
// 启动轮播图
function startLoop() {
  // 清空定时器
  if (timer) {
    clearInterval(timer)
  }
  // 启动定时器
  timer = setInterval(() => {
    // 修改数组的下标
    index++
    // 如果下标范围超过数组长度，重置下标从0开始
    if (index === arr.length) {
      index = 0
    }
    // 找到数组元素对象
    let item = arr[index]
    console.log(item)
    // 把item对象的属性替换到html中
    a.href = item.href
    img.src = item.src
    title.innerHTML = item.title
    // 变量所有的li设置li的激活状态
    for (let i = 0; i < list.length; i++) {
      i === index ? (list[i].className = 'active') : (list[i].className = '')
    }
  }, duration)
}

startLoop()

// 鼠标移入事件 mouseenter
loop.onmouseenter = function () {
  console.log('onmouseenter')
  // 停止轮播
  if (timer) {
    clearInterval(timer)
  }
}
// 鼠标移出事件 mouseleave
loop.onmouseleave = function () {
  console.log('onmouseleave')
  startLoop()
}
